<template>
	<div class="Login">
		<!-- 头部 -->
		<div class="header">
			<div class="w1200">
				<router-link :to="{name:'Index'}" class="logo fl"><img src="../../assets/images/logo.png"></router-link>
			</div>
		</div>
		<div class="main">
			<div class="w1200">
        <!-- 注册 -->
        <div v-if="type==0" class="box fr">
          <div class="tabs">
            <div class="item">我要找工作</div>
            <div class="item active">我要招聘</div>
          </div>
          <el-form class="form" :model="form" :rules="rules" ref="form">
            <el-form-item prop="phone">
                <el-input maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="dragVerify">
                <drag-verify ref="dragVerify" :width="330" :height="42" radius="0" :isPassing.sync="isPassingFlag" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">
                    <i v-show="!isPassingFlag" slot="textBefore" class="el-icon-lock"></i>
                </drag-verify>
            </el-form-item>
            <el-form-item class="code" prop="code">
                <el-input ref="code" maxlength="6" v-model="form.code" placeholder="请输入验证码">
                    
                </el-input>
                <el-button type="text" :disabled="disabledFlag" @click="getCode">{{codeName}}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="btn" @click="submit">登录/注册</el-button>
            </el-form-item>
            <el-form-item class="other" prop="agree">
                <div class="left fl"><el-checkbox v-model="agreeFlag">我已同意</el-checkbox><router-link to="Index">用户协议和隐私政策</router-link></div>
               <div class="right fr" @click="changeType(1)">已有账号，<span>登录</span></div>
            </el-form-item>
        </el-form>
        </div>
        <!-- 登录 -->
        <div v-if="type==1" class="box fr">
          <div class="tabs">
            <div class="item" :class="loginMode == 1 ? 'active':''" @click="changeLoginMode(1)">账号登录</div>
            <div class="item" :class="loginMode == 2 ? 'active':''" @click="changeLoginMode(2)">短信登录</div>
          </div>
          <div v-if="loginMode==2">
                <el-form class="form" :model="form" :rules="rules" ref="form">
                    <el-form-item prop="phone">
                        <el-input maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="dragVerify">
                        <drag-verify ref="dragVerify" :width="330" :height="42" radius="0" :isPassing.sync="isPassingFlag" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">
                            <i v-show="!isPassingFlag" slot="textBefore" class="el-icon-lock"></i>
                        </drag-verify>
                    </el-form-item>
                    <el-form-item class="code" prop="code">
                        <el-input ref="code" maxlength="6" v-model="form.code" placeholder="请输入验证码"></el-input>
                        <el-button type="text" :disabled="disabledFlag" @click="getCode">{{codeName}}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" @click="submit">登录/注册</el-button>
                    </el-form-item>
                    <el-form-item class="other" prop="agree">
                        <div class="left fl"><el-checkbox v-model="agreeFlag">我已同意</el-checkbox><router-link to="Index">用户协议和隐私政策</router-link></div>
                        <div class="right fr mt30" @click="changeType(0)">没有账号，<span>立即注册</span></div>
                    </el-form-item>
                </el-form>
          </div>

          <div v-if="loginMode==1">
           <el-form class="form" :model="form" :rules="rules" ref="form">
                    <el-form-item prop="phone">
                        <el-input v-model.trim="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model.trim="loginForm.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="dragVerify">
                        <drag-verify ref="dragVerify" :width="330" :height="42" radius="0" :isPassing.sync="isPassingFlag" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check">
                            <i v-show="!isPassingFlag" slot="textBefore" class="el-icon-lock"></i>
                        </drag-verify>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" @click="submit">登录/注册</el-button>
                    </el-form-item>
                    <el-form-item class="other" prop="agree">
                        <div class="left fl"><el-checkbox v-model="agreeFlag">我已同意</el-checkbox><router-link to="Index">用户协议和隐私政策</router-link></div>
                        <div class="right fr mt30" @click="changeType(0)">没有账号，<span>立即注册</span></div>    
                    </el-form-item>
                </el-form>
          </div>
        </div>
      </div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="w1200">
				<div class="copyRight fl">Copyright © 2020  黄河人才网   <a href="#">豫ICP备14013441号-5</a> <a href="#">豫ICP证150923号</a></div>
				<div class="friendLink fr">
					<div class="label">友情链接：</div>
					<div class="box">
						<div class="active">河南省投资集团</div>
						<dl>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
							<router-link tag="dd" :to="{name:''}">河南省投资集团</router-link>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import dragVerify from "vue-drag-verify2";
	export default {
		//组件注入
		components: {dragVerify},
		//存放数据
		data() {
			//滑块验证校验方法
			var passcall = (rule, value, callback) => {
				if(this.isPassingFlag==false){
					return callback(new Error('请拖动滑块进行验证'));
				}else{
					callback();
				}
			};
			//同意协议校验方法
			var agree = (rule, value, callback) => {
				if(this.agreeFlag==false){
					return callback(new Error('请阅读并同意用户协议和隐私政策'));
				}else{
					callback();
				}
			};
			//验证码错误
			var codeErr = (rule, value, callback) => {
				if(this.codeErr==true){
					return callback(new Error('验证码错误'));
				}else{
					callback();
				}
			};
			return {
                type: 1, // 0 注册  1登录
                phone: '', // 手机号
                code: '', // 验证码
                loginMode: 1, // 登录方式 1 密码登录 2 手机号登录
                agreeFlag: false, // 同意隐私
                codeName: '获取验证码',
                disabledFlag: false, // 获取验证码能否点击
                time: 60,
                loginForm: {
                    username: 'admin',
                    password: '111111'
                },
				form:{
					phone:'',//手机号
					code:'',//验证码
				},
				isPassingFlag:false,//默认滑块验证状态
				codeErr:false,//验证码错误
				rules: {
                    phone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { validator: this.$telText, trigger: 'blur' },
					],
                    dragVerify: [
                        { validator: passcall, trigger: 'blur' },
					],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { validator: codeErr, trigger: 'blur' },
					],
                    agree: [
                        { validator: agree, trigger: 'blur' },
					],
				}
			}
		},
		//接受父组件传递的值
        props:[],
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
            // 登录方式
            changeLoginMode(mode) {
            this.loginMode = mode
            },
			//切换登录注册
			changeType(type){
				this.type = type
				this.phone = ''
				this.code = ''
				this.disabledFlag = false
				//验证滑块重置
				this.isPassingFlag = false
				this.$refs.dragVerify.reset()
			},
			//获取验证码
			getCode(){
				this.$refs.form.validateField(['phone'],(valid) => {
					if(valid) return
					this.$refs.form.validateField('dragVerify', (valid) => {
						if(valid) return
						//获取验证码接口
						// getSmsCode({
						// 	'mobile':this.form.phone
						// }).then(res =>{
						// 	console.log(res);
						// 	if(res.code==200){
						// 		this.$message.success('验证码发送成功');
						// 		let that = this
						// 		that.disabledFlag = true
						// 		let interval = window.setInterval(function() {
						// 			that.codeName = '已发送' + that.time + 's';
						// 			--that.time;
						// 			if(that.time < 0) {
						// 				that.codeName = "重新发送";
						// 				that.time = 60;
						// 				that.disabledFlag = false;
						// 				window.clearInterval(interval);
						// 			}
						// 		}, 1000);
						// 	}else{
						// 		this.$message.error(res.message);
						// 	}
						// });
					})
				});
			},
			//注册/登录
			submit(){
				this.$refs.form.validate((valid) => {
					if(valid) {
						//登录接口
						
						
					}else{
						return false;
					}
				});
			}
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {}
	};
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.Login{
		.header{height: auto;overflow: hidden;background: #fff;padding: 20px 0;position: relative;z-index: 0;
			.logo{width: 159px;margin-right: 110px;
				img{width: 100%;}
			}
		}
		.main{width: 100%;height: 684px;padding-top: 50px;overflow: hidden;background: url('../../assets/images/login-background.png') center no-repeat;background-size: cover;
			.box{width: 426px;height: 578px;background: #fff;padding: 16px;border-radius: 5px;
				.wechatLoginFlag{height: 38px;font-size: 13px;color: #999;cursor: pointer;
					span{width: 38px;height: 38px;background: url('../../assets/images/wechatLogin.png') center no-repeat;background-size: 100%;display: inline-block;vertical-align: -10px;}
				}
				.tabs{height: auto;overflow: hidden;text-align: center;margin-top: 50px;
					.item{font-size: 20px;color: #999;display: inline-block;margin: 0 50px;cursor: pointer;
						&.active{color: #000;font-weight: bold;}
					}
				}
				.form{width: 330px;height: auto;overflow: hidden;margin: 40px auto;
					.el-form-item{position: relative;
						.el-input{position: relative;z-index: 0;}
						.el-input__inner{height: 42px;line-height: 42px}
						.drag_verify{line-height: 40px !important;border: 1px solid #DCDFE6}
						&.code{
							.el-button{height: 39px;padding: 0 15px;position: absolute;z-index: 1;right: 1px;top: 2px;background: #fff;
								span{position: relative;top: -1px;}
							}
						}
						&.other{border: 0;font-size: 13px;color: #9E9E9E;margin-top: 50px;
							a{color: #9E9E9E;
								&:hover{color: #348CE8;}
							}
							.el-checkbox{margin-right: 5px}
							.right{cursor: pointer;
								span{color: #348CE8;}
							}
							.wechat{@include transition();cursor: pointer;
								i{font-size: 18px;vertical-align: -2px;margin-right: 5px}
								&:hover{color: #00BA0E;}
							}
						}
					}
					.btn{width: 100%;height: 50px;font-size: 16px;}
				}
			}
		}
		.footer{width: 100%;height: 100px;padding: 30px 0;
			.copyRight{height: 40px;line-height: 40px;font-size: 14px;color: #999;
				a{color: #999;}
			}
			.friendLink{height: 40px;line-height: 40px;text-align: center;
				.label{font-size: 14px;color: #999;display: inline-block;}
				.box{width: 221px;height: 40px;border: 1px solid #DCDFE6;font-size: 14px;color: #999;display: inline-block;text-align: left;position: relative;
					.active{padding: 0 15px;cursor: pointer;@include transition();position: relative;
						&:hover{color: #333;}
						&:after{content: "";width: 100%;height: 1px;background: rgba($color: #eee, $alpha: .08);position: absolute;left: 0;top: 0;}
					}
					dl{display: none;height: 0;max-height: 260px;overflow: hidden;width: 220px;position: absolute;right: 0;bottom: 39px;border: 1px solid #DCDFE6;border-bottom: 0;background: #fff;
						dd{padding: 8px 15px;line-height: normal;cursor: pointer;@include transition();
							&:hover{color: #333;}
						}
					}
					&:hover{
						dl{height: auto;overflow: auto;padding: 8px 0;display: block;}
					}
					::-webkit-scrollbar{width: 5px;}
				}
			}
		}
		.wechatLoginPop{width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 99;background: rgba($color: #000, $alpha: .8);
			.btnClose{position: absolute;right: 30px;top: 30px;color: #999;font-size: 30px;cursor: pointer;@include transition();
				&:hover{color: #fff;}
			}
			.wrap{width: 300px;height: 425px;position: relative;margin: auto;margin-top: 12%;
				iframe{width: 100%;height: 425px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
				.overdue{display: block;width: 282px;height: 282px;position: absolute;top: 45px;left: 9px;background-color: rgba(255,255,255,.9);text-align: center;
					.txt{margin-top: 90px;font-size: 20px;color: #414a60;letter-spacing: 1px;margin-bottom: 20px}
					.btn{width: 150px;font-size: 16px;}
				}
			}
		}
	}
</style>